<template>
  <view>
    <!-- 标签栏 -->
    <TabBar :type="'reg'" :tabsList="areaList" @onClickItem="switchNav"></TabBar>
    <!-- 内容 -->
    <view :key="itme" class="content" v-show="currIndex === itme" v-for="itme in areaList.length">
      <view v-for="comItme in companyList" :key="comItme.id" @click="goDetailPage(comItme.company_id)"
        url="/pages/StoreDetails" class="shop_itme">
        <view class="img_box">
          <image class="img" mode="aspectFill" :src="comItme.image"></image>
        </view>
        <view class="left_content">
          <view class="name">{{ comItme.company_name }}</view>
          <view class="location">{{ comItme.markers_address }}</view>
          <uni-icons size="76rpx" color="#cc1d3a" type="icon-more" custom-prefix="iconfont2"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { setCentersList } from '@/utils/utils'
import { companyListApi, brandAreaList } from '@/API/reqData'
export default {
  data() {
    return {
      tempData: {},
      // 基础路径
      baseUrl: this.$baseUrl,
      areaList: [],
      // 公司列表
      companyList: [],
      // 公司列表请求参数
      companyListParam: {
        state: 1,
        page: 1,
        brand_id: "",
        region_id: '',
        pageSize: 10,
      },
      companyData: {},
      current: 0,
      currIndex: 0,
    }
  },
  onLoad() {
    let { brand_id } = this.brandInfo
    this.companyListParam.brand_id = brand_id
    // 品牌对应的地区列表
    this.getBrandAreaList()
    // 获取公司列表
    // this.getCompanyList()
    // 混合分享信息
    this.shareMixin.title = `进店看看`
    this.shareMixin.path = `/pages/StorePage/StoreSee`
  },
  onShow() {
    uni.showTabBar()
  },
  methods: {
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex
      }
    },
    switchNav(index, id) {
      // 点击当前的标签则不需要往下执行
      if (this.currIndex === index) return false
      this.currIndex = index
      this.companyListParam.region_id = id
      // 如果缓存中有，则不用再发请求了
      if (this.tempData[index]) {
        this.companyList = this.tempData[index]
      } else {
        this.getCompanyList(index)
      }
    },
    // 品牌对应的地区列表
    async getBrandAreaList() {
      let { brand_id } = this.brandInfo
      const {
        data: { code, result },
      } = await brandAreaList({ brand_id })
      if (code == 200) {
        if (result.length) {
          this.areaList = result
          this.companyListParam.region_id = result[0]?.id
          // 获取公司列表
          this.getCompanyList()
        }
      }

    },
    // 获取公司列表
    async getCompanyList(index = 0) {
      const {
        data: { data },
      } = await companyListApi(this.companyListParam)
      let base = `${this.baseUrl}/images/company/4s/`
      let temp = data
        .map(item => {
          if (item.company_list.length > 0) {
            let { id, company_name, company_id, markers_address } = item
            let { latitude, longitude, company_images } = item.company_list[0]
            return {
              id,
              latitude,
              longitude,
              company_id,
              company_name,
              markers_address,
              image: `${base}${company_images}`,
            }
          }
        })

      let { longitude, latitude } = this.latLog
      if (longitude) {
        let temp2 = setCentersList(temp, longitude, latitude)
        this.$set(this.tempData, index, temp2)
        this.companyList = temp2
      } else {
        this.$set(this.tempData, index, temp)
        this.companyList = temp
      }
    },
    // 到公司详情页
    goDetailPage(company_id) {
      uni.navigateTo({
        url: `/pages/StorePage/StoreDetails?compaId=${company_id}`,
      })
    },
    ...mapMutations(['saveLatLog']),
  },
  computed: {
    ...mapState(['latLog', 'brandInfo']),
  },
}
</script>
<style lang="scss">
page {
  background-color: #fafafa;
}
</style>
<style lang="scss" scoped>
.content {
  background: #fafafa;
}

.shop_itme {
  display: flex;
  margin: 111rpx 30rpx 60rpx;
  align-items: flex-end;
  height: 150rpx;
  border-radius: 12rpx 0 0 12rpx;
  box-shadow: 0 14rpx 20rpx 0rpx rgba(0, 0, 0, 0.07);

  .img_box {
    width: 320rpx;
    height: 200rpx;
    overflow: hidden;
    border-radius: 12rpx;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .left_content {
    height: 150rpx;
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    padding-left: 30rpx;
    flex: 1;

    .name {
      width: 236rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: #222;
    }

    .location {
      // width: 400rpx;
      font-size: 26rpx;
      line-height: 46rpx;
      color: #999;
    }

    uni-icons {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translate(0%, -50%);
    }
  }
}
</style>
